import { ReloadOutlined, RightOutlined } from '@ant-design/icons';
import { Button, Table, Tag } from 'antd';
import TitleCard from '@/pages/components/TitleCard';

import type { TableProps } from 'antd';
import type { DataType } from '../types/OrderCard.type';

const columns: TableProps<DataType>['columns'] = [
  {
    title: '商品信息',
    dataIndex: 'productData',
    render: productData => {
      return (
        <div className="flex items-center">
          <img src={productData.productImage} alt="productImage" className="w-30 h-30 rounded-15" />
          <div className="flex-1 ml-8">
            <div>{productData.productName}</div>
            <div>{productData.productNumber}</div>
          </div>
        </div>
      );
    },
  },
  { title: '订单编号', dataIndex: 'orderNumber' },
  {
    title: '数量',
    dataIndex: 'quantity',
    render: (_, { quantity }) => <span>x{quantity}</span>,
  },
  {
    title: '实收金额',
    dataIndex: 'revenueAmount',
    render: (_, { revenueAmount }) => <span>¥{revenueAmount}</span>,
  },
  {
    title: '订单状态',
    dataIndex: 'state',
    render: (_, { state }) => {
      const stateMap = {
        '-1': { label: '已退单', color: 'volcano' },
        0: { label: '待支付', color: 'green' },
        1: { label: '已支付', color: 'geekblue' },
      };
      return <Tag color={stateMap[state].color}>{stateMap[state].label}</Tag>;
    },
  },
  {
    title: '操作',
    key: 'action',
    render: () => (
      <Button type="link" className="p-0">
        查看详情
      </Button>
    ),
  },
];
// 写死数据 后期替换
const data: DataType[] = [
  {
    key: '1',
    productData: {
      productName: '羊毛混织连衣裙',
      productNumber: 'SPBH20240425-1',
      productImage: `https://picsum.photos/30/30?random=${+new Date() + Math.random()}`,
    },
    orderNumber: 'DDBH-20240425-1',
    quantity: 2,
    revenueAmount: '299.99',
    state: 0,
  },
  {
    key: '2',
    productData: {
      productName: '哆啦A梦手办',
      productNumber: 'SPBH20240425-2',
      productImage: `https://picsum.photos/30/30?random=${+new Date() + Math.random()}`,
    },
    orderNumber: 'DDBH-20240425-2',
    quantity: 1,
    revenueAmount: '1799.00',
    state: 1,
  },
  {
    key: '3',
    productData: {
      productName: '雷之律者手办',
      productNumber: 'SPBH20240425-3',
      productImage: `https://picsum.photos/30/30?random=${+new Date() + Math.random()}`,
    },
    orderNumber: 'DDBH-20240425-3',
    quantity: 1,
    revenueAmount: '1999.99',
    state: 1,
  },
  {
    key: '4',
    productData: {
      productName: '阿莫西林胶囊',
      productNumber: 'SPBH20240425-4',
      productImage: `https://picsum.photos/30/30?random=${+new Date() + Math.random()}`,
    },
    orderNumber: 'DDBH-20240425-4',
    quantity: 2,
    revenueAmount: '38.00',
    state: 0,
  },
  {
    key: '5',
    productData: {
      productName: '哦豁!爱疯手机',
      productNumber: 'SPBH20240425-5',
      productImage: `https://picsum.photos/30/30?random=${+new Date() + Math.random()}`,
    },
    orderNumber: 'DDBH-20240425-5',
    quantity: 10,
    revenueAmount: '89990.00',
    state: -1,
  },
];

const OrderCard = () => {
  // * 刷新表格数据
  const onRefreshTableClick = () => {
    console.log('🚀 ~ onRefreshTableClick ~ 刷新表格数据');
  };
  // * 查看更多
  const onViewMoreClick = () => {
    console.log('🚀 ~ onViewMoreClick ~ 查看更多');
  };
  return (
    <div>
      <TitleCard title="最新订单">
        <div className="w-full flex justify-between">
          <ReloadOutlined className="text-16 text-primary-color cursor-pointer ml-4" onClick={onRefreshTableClick} />
          <div className="text-14 text-color-paragraph cursor-pointer flex items-center" onClick={onViewMoreClick}>
            查看更多
            <RightOutlined />
          </div>
        </div>
      </TitleCard>
      {/*  */}
      <Table columns={columns} dataSource={data} pagination={false} className="mt-16" />
    </div>
  );
};
export default OrderCard;
